<template>
  <main class="news-detail-box">
    <section class="news-detail-header">
      <p class="title">{{ newsData.title }}</p>
      <div class="news-detail-tip-info">
        <p class="date">{{ formatDate(newsData.createTime) }}</p>
        <p class="author">{{ newsData.author || '' }}</p>
      </div>
    </section>
    <article class="news-detail-content" v-html="newsData.content"></article>
  </main>
</template>
<script>
import HttpServer from '@/utils/http'
import { newsManageAPI } from '@/config/api'
import { formatDate } from '@/utils'

export default {
  name: 'newsDetailPage',
  components: {},
  data() {
    return {
      formatDate,
      newsData: {},
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const { id } = this.$route.params
      const { data } = await HttpServer.get(newsManageAPI.getDetail, { id })
      this.newsData = data
    },
  },
}
</script>
<style lang="less" scoped>
.news-detail-box {
  margin: auto;
  max-width: @contentW;
  padding: @normal * 5 @normal * 2;
  .news-detail-header {
    .title {
      text-align: center;
      font-size: @fsLevel2;
    }
    .news-detail-tip-info {
      display: flex;
      justify-content: space-between;
      align-content: center;
      padding: @normal * 4 0;
      font-size: @fsLevel3;
    }
  }
}
</style>
